<template>
  <div class="app-container">
    <div class="form-box">
      <el-form ref="form" :model="form" label-width="120px" :rules="rules">
        <el-tabs type="border-card" class="form-tabs">
          <el-tab-pane :label="$t('menu.settings')" class="form-tabs-tab-pane">
            <el-collapse v-model="activeForm">
              <el-collapse-item :title="$t('common.basic_info')" name="1">
                <!-- 菜单类型 -->
                <el-row :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item prop="type" :label="$t('menu.type')">
                      <el-radio-group v-model="form.type">
                        <el-radio :label="1">普通菜单</el-radio>
                        <el-radio :label="2">按钮</el-radio>
                      </el-radio-group>
                      <el-tooltip class="item" effect="dark" placement="right">
                        <div slot="content" v-html="$t('menu.type_tips')" />
                        <i class="awesome-icon fas fa-question-circle" />
                      </el-tooltip>
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 上级菜单 -->
                <el-row :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item
                      :label="$t('menu.parent_name')"
                      prop="parent_id"
                    >
                      <jsp-categorytree-picker
                        type="radio"
                        node-key="id"
                        :tree-data="parentTreeData"
                        :placeholder="$t('menu.parent_name_tips')"
                        :dialog-tips="$t('menu.parent_name_tips')"
                        :expand-all="false"
                        :default-checked-keys="[]"
                        default-checked-labels=""
                        height="300px"
                        @change="parentCateChange"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 菜单名称 -->
                <el-row :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item :label="$t('menu.name')" prop="name">
                      <el-input
                        v-model="form.name"
                        :placeholder="$t('menu.name_tips')"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 菜单英文名称 -->
                <el-row :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item :label="$t('menu.enname')" prop="enname">
                      <el-input
                        v-model="form.enname"
                        :placeholder="$t('menu.enname_tips')"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 菜单图标 -->
                <el-row :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item
                      :label="$t('menu.route_icon')"
                      prop="route_icon"
                    >
                      <jsp-icon-picker v-model="form.route_icon" />
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 菜单描述 -->
                <el-row :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item
                      :label="$t('menu.description')"
                      prop="description"
                    >
                      <el-input
                        v-model="form.description"
                        type="textarea"
                        :placeholder="$t('menu.description_tips')"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>

              </el-collapse-item>
              <el-collapse-item :title="$t('menu.route_settings')" name="2">
                <!-- 提示 -->
                <el-row :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-alert
                      :title="$t('menu.route_settings_tips')"
                      type="warning"
                      class="route_settings_tips"
                    />
                  </el-col>
                </el-row>

                <!-- 路由名称 -->
                <el-row :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item
                      :label="$t('menu.route_name')"
                      prop="route_name"
                    >
                      <el-input
                        v-model="form.route_name"
                        :placeholder="$t('menu.route_name_tips')"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <!-- 路由地址 -->
                <el-row :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item
                      :label="$t('menu.route_path')"
                      prop="route_path"
                    >
                      <el-input
                        v-model="form.route_path"
                        :placeholder="$t('menu.route_path_tips')"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 页面组件路径 -->
                <el-row :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item
                      :label="$t('menu.route_component')"
                      prop="route_component"
                    >
                      <el-input
                        v-model="form.route_component"
                        :placeholder="$t('menu.route_component_tips')"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 真实路由地址 -->
                <el-row :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item
                      :label="$t('menu.route_realPath')"
                      prop="route_realPath"
                    >
                      <el-input
                        v-model="form.route_realPath"
                        :placeholder="$t('menu.route_realPath_tips')"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 重定向路由地址 -->
                <el-row :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item
                      :label="$t('menu.route_redirect')"
                      prop="route_redirect"
                    >
                      <el-input
                        v-model="form.route_redirect"
                        :placeholder="$t('menu.route_redirect_tips')"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 高亮路由地址 -->
                <el-row :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item
                      :label="$t('menu.route_activeMenu')"
                      prop="route_activeMenu"
                    >
                      <el-input
                        v-model="form.route_activeMenu"
                        :placeholder="$t('menu.route_activeMenu_tips')"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 总显示根路由 -->
                <el-row :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item
                      :label="$t('menu.route_alwaysShow')"
                      prop="route_alwaysShow"
                    >
                      <el-radio-group v-model="form.route_alwaysShow">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                      </el-radio-group>
                      <el-tooltip class="item" effect="dark" placement="right">
                        <div
                          slot="content"
                          v-html="$t('menu.route_alwaysShow_tips')"
                        />
                        <i class="awesome-icon fas fa-question-circle" />
                      </el-tooltip>
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 固定在标签栏上 -->
                <el-row :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item
                      :label="$t('menu.route_affix')"
                      prop="route_affix"
                    >
                      <el-radio-group v-model="form.route_affix">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                      </el-radio-group>
                      <el-tooltip class="item" effect="dark" placement="right">
                        <div
                          slot="content"
                          v-html="$t('menu.route_affix_tips')"
                        />
                        <i class="awesome-icon fas fa-question-circle" />
                      </el-tooltip>
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 显示在面包屑 -->
                <el-row :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item
                      :label="$t('menu.route_breadcrumb')"
                      prop="route_breadcrumb"
                    >
                      <el-radio-group v-model="form.route_breadcrumb">
                        <el-radio :label="1">显示</el-radio>
                        <el-radio :label="0">隐藏</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 转菜单树 -->
                <el-row :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item
                      :label="$t('menu.route_isTree')"
                      prop="route_isTree"
                    >
                      <el-radio-group v-model="form.route_isTree">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                      </el-radio-group>
                      <el-tooltip class="item" effect="dark" placement="right">
                        <div
                          slot="content"
                          v-html="$t('menu.route_isTree_tips')"
                        />
                        <i class="awesome-icon fas fa-question-circle" />
                      </el-tooltip>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-collapse-item>
              <el-collapse-item :title="$t('menu.api_settings')" name="3">
                <!-- 权限 -->
                <el-row :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item :label="$t('menu.permission')" prop="permission">
                      <el-input
                        v-model="form.permission"
                        :placeholder="$t('menu.permission_tips')"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-collapse-item>
            </el-collapse>
          </el-tab-pane>
        </el-tabs>

        <el-row :gutter="20" type="flex" justify="center" class="btn-row">
          <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
            <el-form-item>
              <el-button type="primary" @click="onSubmit">{{
                $t('common.submit')
              }}</el-button>
              <el-button @click="resetForm">{{ $t('common.reset') }}</el-button>
              <el-button @click="onCancel">{{ $t('common.cancel') }}</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import clipboard from '@/utils/clipboard'
import JspIconPicker from '@/components/JspIconPicker'
import JspCategorytreePicker from '@/components/JspCategorytreePicker'
import i18n from '@/lang'

// export
export default {
  name: 'MenuEdit',
  components: {
    JspIconPicker,
    JspCategorytreePicker
  },
  data() {
    return {
      activeForm: ['1'],
      form: {
        id: 0,
        type: 1,
        parent_id: 0,
        name: '',
        enname: '',
        route_icon: '',
        description: '',
        bind_type: '',
        // 路由配置字段
        route_name: '',
        route_path: '',
        route_component: '',
        route_realPath: '',
        route_redirect: '',
        route_activeMenu: '',
        route_alwaysShow: 0,
        route_noCache: 0,
        route_affix: 0,
        route_breadcrumb: 1,
        route_isTree: 0,
        // 接口配置
        permission: ''
      },
      // 接口选项
      apiOptions: [
        {
          value: '/admin/links/index',
          label: '/admin/links/index'
        },
        {
          value: '/admin/links/:id',
          label: '/admin/links/:id'
        },
        {
          value: '/admin/links/:id/edit',
          label: '/admin/links/:id/edit'
        },
        {
          value: '/admin/links',
          label: '/admin/links'
        },
        {
          value: '/admin/links/sort',
          label: '/admin/links/sort'
        },
        {
          value: '/admin/links/:id/publish',
          label: '/admin/links/:id/publish'
        }
      ],
      // https 提交方法
      httpsMethodsOptions: [
        {
          value: 'GET',
          label: 'GET'
        },
        {
          value: 'POST',
          label: 'POST'
        },
        {
          value: 'PUT',
          label: 'PUT'
        },
        {
          value: 'DELETE',
          label: 'DELETE'
        }
      ],
      // 表单输入校验 ，通过prop="name"属性进行控制
      rules: {
        name: [
          {
            required: true,
            message: i18n.t('menu.name_tips'),
            trigger: 'blur'
          },
          { min: 2, max: 30, message: '字数在 2-30 个', trigger: 'blur' }
        ]
      },
      // 标签输入参数
      keywordsVisible: false,
      keywordsInputValue: '',
      // 缩略图参数
      cover_imageDialogImageUrl: '',
      cover_imageDialogVisible: false,
      cover_imageDisabled: false,
      cover_imageUploadLimit: 1,
      cover_imageViewList: [],
      // 上级栏目数据
      parentTreeData: [
        {
          id: 1,
          parent_id: 0,
          label: '一级 1',
          children: [
            {
              id: 4,
              parent_id: 1,
              label: '二级 1-1',
              children: [
                {
                  id: 9,
                  parent_id: 4,
                  label: '三级 1-1-1'
                },
                {
                  id: 10,
                  parent_id: 4,
                  label: '三级 1-1-2'
                }
              ]
            }
          ]
        },
        {
          id: 2,
          parent_id: 0,
          label: '一级 2',
          children: [
            {
              id: 5,
              parent_id: 2,
              label: '二级 2-1'
            },
            {
              id: 6,
              parent_id: 2,
              label: '二级 2-2'
            }
          ]
        },
        {
          id: 3,
          label: '一级 3',
          parent_id: 0,
          children: [
            {
              id: 7,
              parent_id: 3,
              label: '二级 3-1'
            },
            {
              id: 8,
              parent_id: 3,
              label: '二级 3-2'
            }
          ]
        }
      ],
      // 路由参数
      routerParams: {}
    }
  },
  computed: {},
  created() {
    this.routerParams = this.$route.params
    this.getDetail()
  },
  methods: {
    /** *********************************************** 表单相关 开始 ******************************************************/
    // 内容详情
    async getDetail() {
      // 路由参数
      const { id } = this.routerParams
      this.form.id = id
      if (id > 0) {
        // 请求内容接口：数据不存在报异常则关闭当前标签返回上一页或首页
        // await coding...
      }
    },
    // 提交表单
    onSubmit() {
      console.log(this.form)
      this.$refs['form'].validate((valid) => {
        if (valid) {
          // 请求内容接口
          console.log(this.form)
          this.$message.success('提交!')
        } else {
          this.$message.error('提交失败!')
          return false
        }
      })
    },
    // 取消/返回
    onCancel() {
      // 删除当前页标签并返回上一页
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.go(-1)
      // this.$message.info('已取消！')
    },
    // 表单重置
    resetForm() {
      this.$refs['form'].resetFields()
    },
    /** *********************************************** 表单相关 结束 ******************************************************/
    // 复制
    handleClipboard(text, event) {
      clipboard(text, event)
    },
    // 选择上级栏目
    parentCateChange(e) {
      // console.log(e);
      this.parent_id = e.checkedKeys
    }
  }
}
</script>

<style scoped lang="scss">
.fa-question-circle {
  margin-left: 10px;
  cursor: pointer;
}
.route_settings_tips {
  margin-bottom: 22px;
}
</style>
